<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增文章')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: editormd-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-article-add">
            <h4 class="form-header h4">基本信息</h4>

            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">推荐专区：</label>
                        <div class="col-xs-10">
                            <div class="radio-box" th:each="dict : ${@dict.getType('article_region')}">
                                <input type="radio" th:id="${'articleRegion_' + dict.dictCode}" name="articleRegion" th:value="${dict.dictValue}" th:checked="${dict.default}">
                                <label th:for="${'articleRegion_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                            </div>
                        </div>
                    </div>
                </div>


            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">状态：</label>
                        <div class="col-xs-10">
                            <div class="radio-box" th:each="dict : ${@dict.getType('sys_available_status')}">
                                <input type="radio" th:id="${'available_' + dict.dictCode}" name="available" th:value="${dict.dictValue}" th:checked="${dict.default}">
                                <label th:for="${'available_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                            </div>
                        </div>
                    </div>

                </div>
            </div>


           <!-- <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">文章模型：</label>
                        <div class="col-xs-10">
                            <div class="radio-box" th:each="dict : ${@dict.getType('article_model')}">
                                <input type="radio" th:id="${'articleModel_' + dict.dictCode}" name="articleModel" th:value="${dict.dictValue}" th:checked="${dict.default}">
                                <label th:for="${'articleModel_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>-->

            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">栏目分类：</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input id="treeId" name="categoryId" type="hidden"/>
                                <input class="form-control" type="text" onclick="selectCategoryTree()" id="treeName" readonly="true">
                                <span class="input-group-addon"><i class="fa fa-search"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">文章模型：</label>
                        <div class="col-sm-8">
                            <div class="radio-box" th:each="dict : ${@dict.getType('article_model')}">
                                <input type="radio" th:id="${'articleModel_' + dict.dictCode}" name="articleModel" th:value="${dict.dictValue}" th:checked="${dict.default}">
                                <label th:for="${'articleModel_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">文章标题：</label>
                        <div class="col-sm-8">
                            <input id="title" name="title" class="form-control"   type="text"  >
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">是否转载：</label>
                        <div class="col-sm-8">
                            <label class="toggle-switch switch-solid">
                                <input type="checkbox" id="isCopy" name="isCopy" >
                                <span></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" id="div_isCopy_extend" style="display: none;">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">原文链接：</label>
                        <div class="col-xs-10">
                            <input type="hidden" name="copyFlag" id="copyFlag" value="0">
                            <input type="text" class="form-control" id="link" name="link"   value=""/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">关键词：</label>
                        <div class="col-sm-8">
                            <input name="keywords" class="form-control" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">封面图片：</label>
                        <div class="col-sm-8">
                            <input name="coverImage" class="form-control" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">标签：</label>
                        <div class="col-sm-8">

                            <select id="tags" name="tags"  class="form-control select2-multiple" multiple>
                                <option th:each="tag:${tags}" th:value="${tag.tagId}" th:text="${tag.tagName}" th:selected="${tag.selected}"  th:disabled="${tag.status == '1'}"></option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">启用评论：</label>
                        <div class="col-sm-8">
                            <label class="toggle-switch switch-solid">
                                <input type="checkbox" id="commentFlag" name="commentFlag" checked>
                                <span></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">描述：</label>
                        <div class="col-xs-10">
                            <textarea rows="4" class="form-control" name="description"  placeholder="描述" id="description"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </form>
           <!-- <div class="form-group">
                <label class="col-sm-3 control-label">文章模型：</label>
                <div class="col-sm-8">
                    <input name="articleModel" class="form-control" type="text">
                </div>
            </div>-->
            <h4 class="form-header h4">文章内容</h4>

            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">正文:</label>
                        <div class="col-xs-10">
                            <!--<script id="editor" name="content" type="text/plain" ></script>-->
                            <div id="editormd">
                                <textarea style="display:none;"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <h4 class="form-header h4">操作</h4>
            <div class="row">
                <div class="col-sm-offset-5 col-sm-10">
                    <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                    <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
                </div>
            </div>


    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js" />
    <th:block th:include="include :: editormd-js" />
    <script type="text/javascript">

        /*栏目分类选择*/
        function selectCategoryTree() {
            var prefixTemp = ctx + "cms/category"
            var options = {
                title: '栏目分类选择',
                width: "380",
                url: prefixTemp + "/selectCategoryTree/" + $("#treeId").val(),
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }
        function doSubmit(index, layero){
            var body = layer.getChildFrame('body', index);
            $("#treeId").val(body.find('#treeId').val());
            $("#treeName").val(body.find('#treeName').val());
            layer.close(index);
        }

        var Editor;
        function getSourceValue(){
            var v=Editor.getMarkdown();
            return v;
        }
        function getHtmlValue(){
            var v=Editor.getHTML();
            alert(v);
            return v;
        }
        function getPreviewedHTML(){
            var v=Editor.getPreviewedHTML();
            //alert(v);
            return v;
        }

        $(function(){
            Editor = editormd("editormd", {
                width: "100%",
                height: 640,
                emoji:true,
                syncScrolling: "single",
                saveHTMLToTextarea : true,
                path: ctx+"ajax/libs/editormd/lib/",
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: ctx+"cms/article/uploadImage"
                /*// 上传的后台只需要返回一个 JSON 数据，结构如下：
                 {
                 success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
                 message : "提示的信息，上传成功或上传失败及错误信息等。",
                 url     : "图片地址"        // 上传成功时才返回
                 }
                 */
            });

            $('#tags').select2({
                placeholder:"请选择标签",
                allowClear: true
            });

            $("#isCopy").on("change",function(){
                var v=$(this).prop("checked");
                if(v){
                    $("#copyFlag").val("1");//转载标志
                    $("#div_isCopy_extend").show();
                }else{
                    $("#copyFlag").val("0");
                    $("#div_isCopy_extend").hide();
                }
            });


        })
        var prefix = ctx + "cms/article"
        /*$("#form-article-add").validate({
            focusCleanup: true
        });*/

        function submitHandler() {
            if ($.validate.form("form-article-add")) {
                var title=$("#title").val();
                if($.common.isEmpty(title)){
                    Fast.msg_error("请输入标题!"); return;
                }
                var copyFlag=$("#copyFlag").val();
                if(copyFlag=='1'){
                    var link=$("#link").val();
                    if($.common.isEmpty(link)){
                        Fast.msg_error("请输入原文链接!"); return;
                    }
                }
                var tagIds = $.form.selectSelects("tags");
                if($.common.isEmpty(tagIds)){
                    Fast.msg_error("请选择标签!"); return;
                }
                var content = getPreviewedHTML();
                if (content == '' || content.length == 0) {
                    Fast.msg_error("请输入正文！");
                    return;
                }
                var content_markdown_source=getSourceValue();
                var params = $("#form-article-add").serialize();
                params+="&content="+content;
                params+="&content_markdown_source="+content_markdown_source;
                //var commentFlag = $("input[id='commentFlag']").is(':checked') == true ? 1 : 0;
                $.operate.saveTab(prefix + "/add",params);
            }
        }
    </script>
</body>
</html>